<template>
	<view class="home-list">
		<view class="list">
			<view class="list-item" v-for="(item,index) in listData" :key="index" @click="handleDetails(item)">
				<image class="image" :src="item._image" mode="aspectFill"></image>
				<view class="box">
					<view class="title">{{item._name}}</view>
					<view class="price">
						<text>￥</text>
						<text>{{item._price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			handleDetails(options){
				uni.navigateTo({
					url:"/culturalCreativity/common/shoppingDetails?id="+options.goodsId
				});
			},
			async init() {}
		}
	}
</script>
<style lang="scss" scoped>
	.home-list {
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.list-item {
				margin-top: 24rpx;
				border-radius: 30rpx;
				overflow: hidden;

				.image {
					height: 331rpx;
					width: 331rpx;
					display: block;
				}

				.box {
					background-color: #FFFFFF;

					.price {
						color: rgba(253, 143, 25, 1);
						font-size: 500;
						padding: 32rpx 24rpx 24rpx 24rpx;
					}

					.title {
						font-size: 24rpx;
						width: 331rpx;
						height: 88rpx;
						box-sizing: border-box;
						padding: 0 24rpx;
						padding-top: 24rpx;
						color: rgba(31, 31, 31, 1);
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>
